<template>
	<z-paging ref="paging" v-model="dataList" @query="getDataList" bg-color="#F4F5FA">
		<template #top>
			<su-status-bar />
			<view class="top">

				<view class="top-box">
					<image class="nav-bg" src="@/static/images/nav_bg.png"></image>
					<!-- <view class="nav-title">
						<uni-icons type="left" color="#FFFFFF" size="25" @click="onClickNavBack"></uni-icons>

						<view style="margin: 0 auto;">
							直推成员
						</view>

					</view> -->
					<uni-nav-bar left-icon="left" backgroundColor="transparent" :border="false" color="#fff"
						@clickLeft="onClickNavBack">
						<view class="nav-title">直推成员</view>
					</uni-nav-bar>
					<view class="total-box">
						<view class="total-team">
							<view class="left">
								<image class="avatar" :src="curMemberInfo.avatar" mode="aspectFit"></image>
								<view class="name">
									{{curMemberInfo.username}}
									<text style="color: #4D7BFF;">({{getIdentity(curMemberInfo.userIdentity)}})</text>
								</view>
								<view class="time">
									于{{formatTime(curMemberInfo.createTime)}}成为{{getIdentity(curMemberInfo.userIdentity)}}
								</view>
								<!-- <view class="value">{{invitationInfo.num?invitationInfo.num:0}}</view> -->
							</view>
							<view class="right" v-if="invitationInfo.username"
								@click="cheMemberSuperiors(invitationInfo)">
								<text>邀请人：</text>
								<text>{{invitationInfo.username}}</text>

							</view>

						</view>

					</view>

				</view>

			</view>

			<view class="my-team">
				<view style="width:90%">
					直推成员
				</view>
			</view>
		</template>
		<template #empty>
			<view class="">该会员没有直推</view>
		</template>
		<view class="logs-box">
			<view style="width: 100%;padding-bottom: 5px;" v-for="(item,index) in dataList" :key="item.id"
				@click="cheMember(item)">
				<view class="log">
					<view class="log-left">
						<image class="avatar" :src="item.avatar" mode="aspectFit"></image>
						<view>
							<view class="operation">{{item.username}}</view>
							<view class="time">
								于{{formatTime(item.createTime)}}成为{{getIdentity(item.userIdentity)}}
							</view>
						</view>

					</view>
					<view class="log-right">
						<!-- <text
							:style="item.operation==3?'color: #E42121':''">{{item.operation==1?'-':item.operation==3?'+':''}}￥{{item.value}}</text> -->
					</view>
				</view>
				<!-- <su-line color="red" /> -->
				<view class="line" v-if="index!=dataList.length-1"></view>
			</view>
		</view>
		<!-- <s-tabbar path="/pages/index/token" /> -->
	</z-paging>



</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive,
		// computed
	} from 'vue';
	import teamApi from '@/sheep/api/member/team'
	import {
		timeFormat
	} from '@/sheep/helper/index'
	import sheep from '@/sheep';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const dataList = ref([])
	const paging = ref(null)
	const pageInfo = reactive({
		pageNo: 1,
		pageSize: 10,
		type: -1,
		id: ''
	})
	let memberIndex = 0 //当前直推层级
	const curMemberInfo = ref({}) //当前查看的成员
	// const userInfo = computed(() => sheep.$store('user').userInfo || {});
	const getDataList = async (pageNo, pageSize) => {
		console.log('pageNo, pageSize', pageNo, pageSize);
		pageInfo.pageNo = pageNo ? pageNo : pageInfo.pageNo
		pageInfo.pageSize = pageSize ? pageSize : pageInfo.pageSize
		pageInfo.id = curMemberInfo.value.id

		console.log('pageInfo', pageInfo);
		// 获得我邀请的团队下级
		let res = await teamApi.getMyInvitation(pageInfo)
		console.log('获得我邀请的团队下级', res)
		// setTimeout(() => {
		if (res.code == 0) {
			paging.value.complete(res.data.list);

		} else {
			paging.value.complete(false);
		}
		// paging.value.complete(10);
		// }, 1000);
	}
	const invitationInfo = ref({})
	//获得邀请我的用户
	const getInvitationInfo = async () => {
		const id = curMemberInfo.value.id
		let res = await teamApi.getInvitationMy({
			id: id
		})
		console.log('获得邀请我的用户', res)
		// setTimeout(() => {
		if (res.code == 0) {
			invitationInfo.value = res.data
		}

	}
	//查看直推
	const cheMember = async (item) => {
		console.log('当前直推层级', memberIndex);
		if (memberIndex >= 2) return

		paging.value.clear()
		curMemberInfo.value = item
		await getInvitationInfo()
		await getDataList()
		memberIndex++
	}
	const cheMemberSuperiors = async (item) => {
		if (memberIndex == 0) return
		paging.value.clear()
		curMemberInfo.value = item
		await getInvitationInfo()
		await getDataList()
		memberIndex--
		console.log('memberIndex', memberIndex);
	}
	const onClickNavBack = () => {
		uni.navigateTo({
			url: '/pages/me/team'

		})
	}

	const checkMyInviter = () => {
		uni.navigateTo({
			url: '/pages/me/components/myInviter'

		})
	}
	//格式化时间戳
	const formatTime = (timestamp) => {
		return timeFormat(timestamp, 'yyyy-mm-dd')
	}
	//获取我的团队身份

	const getIdentity = (userIdentity) => {
		switch (userIdentity) {
			case 0:
				return '普通会员'
				break;
			case 1:
				return '零售商'
				break;
			case 2:
				return '代理商'
				break;
			case 3:
				return '批发商'
				break;
			default:
				break;
		}

	}

	onLoad((options) => {

		curMemberInfo.value = JSON.parse(options.menberInfo)
		console.log('curMemberInfo.value', curMemberInfo.value);
	});
	onMounted(() => {
		getInvitationInfo()
	})
</script>

<style lang="scss" scoped>
	page {
		background: #F5F5FA;
	}


	.top {
		width: 100vw;
		height: calc(100vw * 200.0 / 375);


	}

	.nav-bg {
		width: 100vw;
		height: calc(100vw * 150.0 / 375);
		position: absolute;
		top: 0;
		z-index: -10;

	}

	.nav-title {
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-items: center;
		justify-content: center;
		flex: 1;
	}

	.top-box {
		width: 100vw;
		height: calc(100vw * 150.0 / 375);
		position: relative;
	}

	.total-box {
		width: 90%;
		// margin: 0 20px;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 10px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%);

		.line {
			width: 1px;
			min-height: 40px;
			background: white;
		}

		.total-team {
			display: flex;
			// align-items: center;
			justify-content: space-between;
			// margin-bottom: 15px;

			.left {
				line-height: 1.5;
				text-align: center;

				.avatar {
					width: 40px;
					height: 40px;
				}

				.name {
					font-size: 14px;
					font-weight: 550;
				}

				.time {
					margin-top: 5px;
					font-size: 10px;
					color: #838383;
				}

				.value {
					color: #4D7BFF;
					font-weight: bold;
					font-size: 22px;
				}
			}

			.right {
				font-size: 13px;
				font-weight: 550;
				margin: 10px;
				// color: #4D7BFF;
				// display: flex;
				// align-items: center;
				// padding: 5px;
				// box-sizing: border-box;
				// border: 1px solid;
				// border-radius: 50px;
			}
		}

		.total-identity {
			display: flex;
			align-items: center;
			justify-content: space-around;
			border-radius: 5px;
			background-color: #EDF1FF;
			padding: 15px 0px;
			box-sizing: border-box;

			.identity-item {
				text-align: center;
				line-height: 1.8;

				.name {
					font-size: 15px;
					font-weight: 550;
				}

				.value {
					font-size: 16px;
					color: #4D7BFF;
					font-weight: bold;
				}
			}
		}
	}

	.my-team {
		width: 100%;
		padding: 10px;
		// display: flex;
		// justify-content: center;
		// margin: 10px 0;
		font-weight: bold;
		font-size: 15px;
		color: #4D7BFF;
	}

	.logs-box {
		// margin-top: 10px;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 20rpx;
		padding: 10px;
		box-sizing: border-box;

		.log {
			// width: 90%;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 8px;
			box-sizing: border-box;
			line-height: 1.8;
			border-radius: 5px;
			box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);

			.log-left {
				font-size: 13px;
				display: flex;
				align-items: center;

				.avatar {
					width: 40px;
					height: 40px;
					border-radius: 50%;
					margin-right: 10px;
				}

				.operation {
					font-weight: 550;
				}

				.time {
					font-size: 12px;
					color: #838383;
				}
			}

			.log-right {
				font-size: 14px;
				font-weight: 600;

			}
		}

		.line {
			height: 1px;
			width: 100%;
			background: #F1F1F1;

		}
	}
</style>